<template>
  <el-sub-menu index="10">
    <template #title>{{ user_name }} </template>
    <el-menu-item index="10-1" @click="handlexian">用户管理</el-menu-item>
    <login-out></login-out>
  </el-sub-menu>
  <!-- 用户管理 -->
  <el-dialog v-model="centerDialogVisible" title="用户管理" width="40%">
    <!-- 换行 -->
    <el-divider />
    <div class="user-top">
      <add-user></add-user>
      <input
        class="top-input"
        type="text"
        placeholder="search"
        v-model="searchvaule"
        @keyup.enter="handleSearch(searchvaule)"
      />
      <el-table :data="tableData" style="width: 100%">
        <!-- 用户名 -->
        <el-table-column label="用户名" width="160">
          <template #default="scope">
            <div style="align-items: center">
              <span style="margin-left: 10px">{{ scope.row.user_name }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 用户类型 -->
        <el-table-column label="用户类型" width="160">
          <template #default="scope">
            <div style="align-items: center">
              <span style="margin-left: 10px">{{
                state(scope.row.user_type)
              }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 登陆状态 -->
        <el-table-column label="登录状态" width="160">
          <template #default="scope">
            <div style="align-items: center">
              <span style="margin-left: 10px">{{
                loginStatus(scope.row.user_onlinestatus)
              }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              v-show="scope.row.user_type == 2 ? false : true"
              @click="handlEmodify(scope.row.user_id)"
              >修改</el-button
            >
            <el-button
              size="small"
              v-show="scope.row.user_type == 2 ? false : true"
              type="danger"
              @click="handleDelete(scope.row.user_id)"
              >删除</el-button
            >
            <el-button
              size="small"
              v-show="
                scope.row.user_type == 2 || scope.row.user_onlinestatus == 0
                  ? false
                  : true
              "
              @click="
                handleStata(
                  scope.row.user_id,
                  scope.row.user_name,
                  scope.row.user_password
                )
              "
              type="warning"
              >下线</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="50"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>

  <!-- 修改用户 -->
  <el-dialog
    v-model="emodifyDialogVisible"
    title="修改"
    width="30%"
    destroy-on-close
    center
  >
    <el-form ref="ruleFormRef" :model="form" :rules="rules">
      
      <div style="  margin: 10px;margin-left: 0px;">原用户名：&nbsp;&nbsp;{{ username }}</div>
      <el-form-item label="用户名：" label-width="80px" prop="name">
        <el-input
          autocomplete="off"
          class="form-name"
          v-model.trim.lazy="form.name"
        />
      </el-form-item>
      <div style="padding-left: 2px;  margin: 10px;">原密码：&nbsp;&nbsp;&nbsp;{{ userpassword }}</div>
      <el-form-item label="密码：" label-width="80px" prop="password">
        <el-input
          autocomplete="off"
          v-model.trim.lazy="form.psw"
          show-password
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emodifyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import LoginOut from '../../Login/components/LoginOut.vue'
import AddUser from './Adduser.vue'
import { superAdmin } from './hoosk/superadmin'
import { onMounted, computed, reactive } from 'vue'
// 登入用户名
const user_name = ref()
onMounted(() => {
  // 从路由获取用户名
  const $route = useRoute()
  const name = $route.query

  user_name.value = name.name
})

const {
  centerDialogVisible,
  emodifyDialogVisible,
  currentPage,
  pageSize,
  small,
  background,
  disabled,
  tableData,
  oneUser,
  searchvaule,
  handleSearch,
  handlexian,
  handleSizeChange,
  handleCurrentChange,
  handlEmodify,
  handleDelete,
  handleStata,
  rules,
  form,
  handleConfirm,
  username,
  userpassword
} = superAdmin()

// 计算属性判断用户类型
const state = computed(() => {
  return (type) => {
    if (type == 0) {
      return '普通用户'
    } else if (type == 1) {
      return '交管部门'
    } else {
      return '管理员'
    }
  }
})

// 计算属性判断登录状态
const loginStatus = computed(() => {
  return (status) => {
    if (status == 1) {
      return '登录'
    } else if (status == 0) {
      return '下线'
    }
  }
})
</script>
<style>
.el-dialog__body {
  padding: 0;
}
.el-dialog {
  min-width: 690px;
}
</style>
<style scoped>
@import url('./style/SuperAdmin.css');
</style>
